<!-- 魔方模板：一行两列 -->
<template>
  <div class="row-two-cols">
    <a-row :gutter="imageGutter">
      <a-col class="every-box" @click.prevent="handleClick(0)" :class="(!preview && selected === 0) ? 'ant-col-selected': ''" :span="12">
        <img v-if="images[0]" ref="img0" :src="images[0]" alt="">
        <p ref="img0" v-else >宽度375像素</p>
      </a-col>
      <a-col class='every-box' @click.prevent="handleClick(1)" :class="(!preview && selected === 1) ? 'ant-col-selected': ''" :span="12">
        <img v-if="images[1]" ref="img1" :src="images[1]" alt="">
        <p ref="img0" v-else >宽度375像素</p>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import TemplateMixin from '@/components/Draggable/template/TemplateMixin'
  export default {
    name: 'RowTwoCols',
    mixins: [TemplateMixin],
    mounted () {
      const { $refs: { img0, img1 } } = this
      img0.height = img0.width
      img1.height = img1.width
    }
  }
</script>

<style lang="less">
  .row-two-cols {
    width: 100%;
    .every-box{
      height: 150px;
    }
    .ant-col {
      background-color: #fff;
      border: 1px solid #ebedf0;
      color: #7d7e80;
      cursor: pointer;
      &.ant-col-selected {
        background: #e0edff;
        border: 1px solid #155bd4;
        color: #155bd4;
      }
      img {
        width: 100%;
        height: 100%;
        border: none;
      }
      p {
        text-align: center;
        position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
</style>
